<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>给图片添加背景</title>
    <script src="test.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        margin: 50px auto 0;
        display: block;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400px" height="400px"></canvas>

    <script>
      // 1. 获取webgl上下文
      const canvas = document.getElementById('canvas')
      const gl = canvas.getContext('webgl')

      // 2. 定义顶点着色器和片元着色器
      const vsSource = `
        attribute vec4 aPosition;
        attribute vec2 aTexCoord;
        varying vec2 vTexCoord;
        void main(){
          gl_Position = aPosition;
          vTexCoord = aTexCoord;
        }`

      const fsSource = `
        precision mediump float;
        varying vec2 vTexCoord;
        uniform sampler2D uSampler1;
        uniform sampler2D uSampler2;
        void main(){
          vec4 color1 = texture2D(uSampler1, vTexCoord);
          vec4 color2 = texture2D(uSampler2, vTexCoord);
          gl_FragColor = mix(color1, color2, 0.5); // 将两张纹理混合
        }`

      // 3. 初始化WebGL程序
      const program = initShader(gl, vsSource, fsSource)
      gl.useProgram(program)

      // 4. 创建顶点和索引缓冲区
      const points = new Float32Array([
        -1.0, 1.0, 0.0, 0.0, 1.0, -1.0, -1.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 1.0, -1.0, 0.0, 1.0, 0.0
      ])

      const indics = new Int16Array([0, 1, 2, 1, 2, 3])

      const pointsbuffer = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, pointsbuffer)
      gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)

      const indicsbuffer = gl.createBuffer()
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicsbuffer)
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indics, gl.STATIC_DRAW)

      // 5. 获取并设置顶点属性指针
      const aPosition = gl.getAttribLocation(program, 'aPosition')
      const aTexCoord = gl.getAttribLocation(program, 'aTexCoord')
      gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 20, 0)
      gl.enableVertexAttribArray(aPosition)
      gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 20, 12)
      gl.enableVertexAttribArray(aTexCoord)

      // 6. 创建纹理对象并加载图片
      const loadTexture = src => {
        return new Promise(resolve => {
          const texture = gl.createTexture()
          const image = new Image()
          image.crossOrigin = 'anonymous'
          image.src = src
          image.onload = () => {
            gl.bindTexture(gl.TEXTURE_2D, texture)
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image)
            resolve(texture)
          }
        })
      }

      // 7. 使用Promise.all加载两张图片
      Promise.all([loadTexture('../asset/border.png'), loadTexture('../asset/content.png')]).then(([texture1, texture2]) => {
        // 绑定纹理到对应的纹理单元
        gl.activeTexture(gl.TEXTURE0)
        gl.bindTexture(gl.TEXTURE_2D, texture1)
        gl.uniform1i(gl.getUniformLocation(program, 'uSampler1'), 0)

        gl.activeTexture(gl.TEXTURE1)
        gl.bindTexture(gl.TEXTURE_2D, texture2)
        gl.uniform1i(gl.getUniformLocation(program, 'uSampler2'), 1)

        // 绘制场景
        drawScene()
      })

      // 8. 绘制场景函数
      function drawScene() {
        gl.clear(gl.COLOR_BUFFER_BIT)
        gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0)
      }
    </script>
  </body>
</html>
